
import { Property } from '../../../components/Property'

## TextInput

`TextInput` is a component that allows you to enter any text.

![](/gifs/text-input-1.gif)

### Usage Example

```lua
local signal = n.create_signal({
  value = "hello world",
})

n.text_input({
  autofocus = true,
  autoresize = true,
  size = 1,
  value = signal.value,
  border_label = "Description",
  placeholder = "Enter a description",
  max_lines = 5,
  on_change = function(value, component)
    signal.value = value

    component:modify_buffer_content(function()
      component:set_border_text("bottom", "Length: " .. #value, "right")
    end)
  end,
  on_mount = function(component)
    local initial_value = signal.value:get_value()
    component:set_border_text("bottom", "Length: " .. #initial_value, "right")
  end,
})

```

### Properties

#### autoresize

<Property
  defaultValue="false"
  types={['boolean']}
/>

#### max_lines

<Property
  types={['number']}
/>

#### value

<Property
  defaultValue='""'
  types={['string']}
/>

#### linebreak

<Property 
  defaultValue="false"
  types={['boolean']}
/>

#### placeholder

> Optional placeholder text to show when the input is empty.
> Can be a string, a single virtual text chunk, or a list of virtual text chunks.

<Property
  defaultValue='nil'
  types={['string', '{ [1]: string, [2]: string }[]', 'nil']}
/>

A virtual text chunk is a tuple-like table where the first element
is the text and the second element is the highlight group.

```lua
local placeholder = {
  { "Hello", "Comment" },
  { "World", "String" },
}
```

#### on_change

<Property
  types={['fun(value: string, component: TextInput): nil']}
/>

